doctype html
html(lang=language)
  head
    meta(name="description" content=description)
    meta(name="viewport" content="width=device-width, user-scalable=no, initial-scale=1")
    link(rel="alternate" hreflang="pt" href="https://microstudio.dev/ru/")
    link(rel="alternate" hreflang="pt" href="https://microstudio.dev/pt/")
    link(rel="alternate" hreflang="it" href="https://microstudio.dev/it/")
    link(rel="alternate" hreflang="de" href="https://microstudio.dev/de/")
    link(rel="alternate" hreflang="pl" href="https://microstudio.dev/pl/")
    link(rel="alternate" hreflang="fr" href="https://microstudio.dev/fr/")
    link(rel="alternate" hreflang="en" href="https://microstudio.dev")
    title #{title}

    each css in css_files
      link(rel="stylesheet" type="text/css" href=css)

    link(rel="stylesheet" href="/lib/fontlib/fontawesome/css/all.css")

    link(rel="stylesheet" href="/lib/fontlib/ubuntu/index.css")
    link(rel="stylesheet" href="/lib/fontlib/ubuntu-mono/index.css")
    link(rel="stylesheet" href="/lib/fontlib/source-sans-pro/index.css")
    link(rel="stylesheet" href="/lib/fontlib/source-sans-pro/700.css")

    link(rel="apple-touch-icon" sizes="180x180" href="/img/favicon180.png")
    link(rel="icon" type="image/png" sizes="32x32" href="/img/favicon32.png")
    link(rel="icon" type="image/png" sizes="16x16" href="/img/favicon16.png")
    link(rel="manifest" href="/manifest.json")

    script(type="application/ld+json").
      {
        "@context": "https://schema.org",
        "@type": "SoftwareApplication",
        "name": "microStudio",
        "applicationCategory": "https://schema.org/WebApplication",
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "USD"
        },
        "operatingSystem": "Any"
      }

    meta(property="og:title" content=title)
    meta(property="og:type" content="website")
    meta(property="og:url" content="https://microstudio.dev")
    meta(property="og:image" content=poster)
    meta(property="og:description" content=long_description)

    meta(name="twitter:card" content="summary_large_image")
    meta(name="twitter:site" content="@microStudio")
    meta(name="twitter:title" content=title)
    meta(name="twitter:description" content=long_description)
    meta(name="twitter:image" content=poster)

    script(src="/lib/jquery/jquery.js")
    script(src="/lib/jquery-ui/jquery-ui.min.js")
    script(src="/lib/ace/ace.js")
    script(src="/lib/ace/mode-microscript.js")
    script(src="/lib/ace/mode-microscript2.js")
    script(src="/lib/ace/mode-markdown.js")
    script(src="/lib/ace/theme-tomorrow_night_bright.js")

    script(src="/lib/marked/marked.js")
    script(src="/lib/dompurify/purify.js")
    script(src="/lib/qrcode/qrcode.js")

    script.
      marked = marked.marked ;

    script.
      window.ms_languages = !{JSON.stringify(languages)};
      window.ms_standalone = !{standalone} ;
      window.ms_project_moderation = !{project_moderation} ;
      window.translation = !{translation};
      window.dev_domain = !{dev_domain} ;
      window.run_domain = !{run_domain} ;
      window.ms_optional_libs = !{JSON.stringify(optional_libs)};
      window.ms_graphics_options = !{JSON.stringify(graphics_options)};

    if default_project_language
      script.
        window.ms_default_project_language = "!{default_project_language}" ;

    if tutorials_root_url
      script.
        window.ms_tutorials_root_url = "!{tutorials_root_url}" ;

    each js in javascript_files
      script(src=js)

  body.notranslate(translate="no")
    noscript
      p #{translator.get("Your browser has JavaScript disabled. Please enable JavaScript in your browser preferences, in order to use microStudio.")}
    header
      div(id="create-account-button" title=translator.get("Create My Account"))
        <i class="login fa fa-user-plus"></i><span>#{translator.get("Create My Account")}</span>

      div(id="login-button" title=translator.get("Login"))
        <i class="login fa fa-sign-in-alt"></i><span>#{translator.get("Login")}</span>

      div.login-info#login-info
        div.username
          img(style="display: none;")
          i.fa.fa-user
          span#user-nick

      div#header-progress-summary.hidden
        div#header-progress-level Level 0
        div#header-progress-xp 0

      i.fas.fa-bars.main-menu#main-menu-button

      img.logo#logo(src="/img/microstudiologo.svg" alt="microStudio" title="microStudio")

      div.titlemenu
        li#menu-explore.selected(title=translator.get("Explore")) <i class="fa fa-search"></i><br /><span>#{translator.get("Explore")}</span>
        li#menu-projects(title=translator.get("Create")) <i class="fa fa-code"></i><br /><span>#{translator.get("Create")}</span>
        //- li#menu-play(title=translator.get("Play")) <i class="fa fa-gamepad"></i><br /><span>#{translator.get("Play")}</span>
        li#menu-tutorials(title=translator.get("Tutorials")) <i class="fa fa-lightbulb"></i><br /><span>#{translator.get("Tutorials")}</span>
        li#menu-help(title=translator.get("Documentation")) <i class="fa fa-book-open"></i><br /><span>#{translator.get("Documentation")}</span>
        a(target="_blank" href=language == "fr" ? "/fr/community/" : "/community/")
          li#menu-community(title=translator.get("Community")) <i class="fa fa-users"></i><br /><span>#{translator.get("Community")}</span>
        a(target="_blank" href="https://discord.com/invite/BDMqjxd")
          li#menu-community(title="Discord") <i class="fab fa-discord"></i><br /><span>Discord</span>
        li#menu-about(title=translator.get("About")) <i class="fa fa-info-circle"></i><br /><span>#{translator.get("About")}</span><i class="fab fa-patreon"></i>

        div#language-setting
          i.fas.fa-comment
          div.lang.notranslate(translate="no") #{language.toUpperCase()}
        
        div.language-menu-container
          div.language-menu#language-menu
            div.language-choice#language-choice-en(title="English")
              i.fas.fa-comment
              div.notranslate(translate="no") EN

            div.language-choice#language-choice-fr(title="Français")
              i.fas.fa-comment
              div.notranslate(translate="no") FR

            div.language-choice#language-choice-pl(title="Polski")
              i.fas.fa-comment
              div.notranslate(translate="no") PL

            div.language-choice#language-choice-de(title="Deutsch")
              i.fas.fa-comment
              div.notranslate(translate="no") DE

            div.language-choice#language-choice-it(title="Italiano")
              i.fas.fa-comment
              div.notranslate(translate="no") IT

            div.language-choice#language-choice-pt(title="Português")
              i.fas.fa-comment
              div.notranslate(translate="no") PT

            div.language-choice#language-choice-ru(title="русский")
              i.fas.fa-comment
              div.notranslate(translate="no") RU

            div.language-choice#language-choice-es(title="Español")
              i.fas.fa-comment
              div.notranslate(translate="no") ES


    div.usermenu(style="height:0px;")
      //div.profile <i class="fa fa-user"></i> #{translator.get("Profile")}
      div.settings <i class="fa fa-cogs"></i> #{translator.get("Settings")}
      div.profile <i class="fas fa-user-circle"></i> #{translator.get("Profile")}
      div.progress <i class="fas fa-chart-bar"></i> #{translator.get("Stats & Achievements")}
      div.logout <i class="fa fa-power-off"></i> #{translator.get("Logout")}
      div.create-account <i class="fa fa-user-plus"></i> #{translator.get("Create Account")}
      div.discard-account <i class="fa fa-trash"></i> #{translator.get("Quit and Delete")}

    div.main-container
      div.home-section#home-section
        div.part.part1
          div.center
            img.mainlogo(src="/img/microstudiologo.svg" alt="microStudio" style="width: 250px")
            p.p1 #{translator.get("microStudio is a free game engine online.")}
            p.p2 #{translator.get("Create games, learn programming, play, share, prototype and jam!")}

          div.center.right
            img.screen(src="/img/microstudio.jpg" alt="microStudio view")

          div#home-header-background

        div.part
          div.center
            img.screen(src="/img/mapeditor.png" alt="microStudio map editor")
          div.center
            h2 #{translator.get("Online and integrated")}
            p #{translator.get("microStudio includes all you need to write code, create sprites and maps for your 2D game.")}
            p #{translator.get("All from your web browser. Your project is stored in the cloud, accessible from anywhere.")}

        div.part
          div.center
            h2 #{translator.get("Get into programming")}
            p #{translator.get("Write your game code in microScript, a simple language inspired by Lua.")+" "+translator.get("The documentation is always there to help. Create cool demos in just a few lines of code.")}
            p #{translator.get("microScript shines by its simplicity and interactivity. But you can also code in JavaScript, Python or Lua if you prefer.")}
          div.center
            img.screen(src="/img/codeeditor.jpg" alt="Code Editor")

        div.part
          div.center
            img.screen(src="/img/spriteeditor.jpg" alt="Sprite Editor")
          div.center
            h2 #{translator.get("Design")}
            p #{translator.get("Create pixel art sprites and maps with the included editors.")}
            p #{translator.get("Using your sprites and maps from code is as easy as 1-2-3.")}

        div.part(style="padding-bottom:0")
          div.center
            h2 #{translator.get("Adjusting is a breeze")}
            p #{translator.get("Change anything from your PC while testing your game on your mobile.")}
            p #{translator.get("Your changes are immediately reflected in your ongoing playing session.")}
          div.center(style="padding:0;line-height: 0;margin-top:-50px")
            img.screen(src="/img/smartphone.png" alt="Run on your smartphone" style="box-shadow: none;")

        div.part
          div.center
            i.fa.fa-users
          div.center
            h2 #{translator.get("Bring your friends")}
            p #{translator.get("You can invite others to your project and work in teams.")}
            p #{translator.get("microStudio automagically synchronizes all your project files in real time.")}

        div.part
          div.center
            h2 #{translator.get("Get your gear ready")}
            p #{translator.get("Control your game using the gamepad, touchscreen, keyboard or mouse inputs.")}
            p #{translator.get("Export your project in a single click to HTML5, Windows, Linux, macOS. More export options are coming!")}
          div.center
            img.screen(src="/img/gamepad.svg" alt="Gamepad" style="box-shadow: none; width: 75%")

        div.part
          div.center
            img.screen(src="/img/community.jpg" alt="Community" style="box-shadow: none;")
          div.center
            h2 #{translator.get("Join the community")}
            p #{translator.get("Browse public games, demos, resources. Pick up what you need for your own project.")}
            p #{translator.get("Contribute your best creations and help others.")}


        div.part.last
          img(src="/img/microstudiologo.svg" alt="microStudio" style="width: 250px")

        div.part
          h2 #{translator.get("So what now?")}
          br
          div.button#home-action-explore
            i.fa.fa-search
            br
            span #{translator.get("Explore public projects")}
          div.button#home-action-create
            i.fa.fa-pencil-alt
            br
            span #{translator.get("Start creating!")}


        div.part
          h2 #{translator.get("Standalone, offline application")}
          div.center
            p #{translator.get("Would you like to work completely offline? Download the microStudio standalone app for Windows, Mac, Linux and Raspberry Pi:")}
            p
              a(href="https://microstudio.itch.io/microstudio") Download microStudio on itch.io
          div.center
            img(src="/img/windows.svg" alt="Windows" style="box-shadow: none; width: 100px; margin: 20px 40px")
            img(src="/img/macos.svg" alt="macOS" style="box-shadow: none; width: 100px; margin: 20px 40px")
            br
            img(src="/img/ubuntu.svg" alt="Linux" style="box-shadow: none; width: 100px; margin: 20px 40px")
            img(src="/img/raspberry.svg" alt="Raspberry Pi OS" style="box-shadow: none; width: 100px; margin: 20px 40px")

        div.part
          h2 #{translator.get("microStudio is open source")}

          div.center
            i.fab.fa-github

          div.center
            p #{translator.get("microStudio is open source software, released under the MIT License:")}
            p
              a(href="https://github.com/pmgl/microstudio") microStudio on GitHub

        div.part
          h2 #{translator.get("Support me on Patreon")}

          div.center
            p #{translator.get("You like microStudio and would like to support me? Check my Patreon!")}
            p
              a(href="https://www.patreon.com/microstudiodev") microStudio on Patreon

          div.center
            i.fab.fa-patreon(style="color:#f96854")


        div.footer
          p #{translator.get("Created in Strasbourg, France. See 'About' for more information")}
          p
            img(src="/img/faviconlarge.png" alt="microStudio icon" style="border-radius: 8px; width: 48px")
          p #{translator.get("You are not tracked here.")}<br />#{translator.get("microStudio doesn't use any third-party tracking script.")}
          p.notranslate(translate="no")
            a.notranslate(id="switch-to-fr" href="/fr/" translate="no") microStudio en Français
            i.fa.fa-circle
            a.notranslate(id="switch-to-en" href="/" translate="no") microStudio in English
            br
            a.notranslate(id="switch-to-pl" href="/pl/" translate="no") microStudio w języku polskim
            i.fa.fa-circle
            a.notranslate(id="switch-to-de" href="/de/" translate="no") microStudio auf Deutsch
            i.fa.fa-circle
            a.notranslate(id="switch-to-it" href="/it/" translate="no") microStudio in Italiano
            i.fa.fa-circle
            a.notranslate(id="switch-to-pt" href="/pt/" translate="no") microStudio em Português
            i.fa.fa-circle
            a.notranslate(id="switch-to-ru" href="/ru/" translate="no") microStudio на русском языке
            i.fa.fa-circle
            a.notranslate(id="switch-to-es" href="/es/" translate="no") microStudio en español

      div.exploreview#explore-section
        div#explore-bar
          div#explore-back-button
            i(class="fa fa-arrow-left")
            span #{translator.get("Back")}

          div#explore-tools
            div#explore-sort-button.hot
              i.fas.fa-arrows-alt-v
              span #{translator.get("Hot")}

            div#explore-type-button.all
              i.fa
              span #{translator.get("All")}

            div#explore-search
              input#explore-search-input(name="search")
              i.fa.fa-search

        div#explore-tags-bar.collapsed
          div#explore-tags
          i.fa.fa-caret-right#explore-tags-collapse

        div#explore-contents
          div#explore-box-list

        div#explore-project-details
          include projectdetails.pug

      div.help-section#help-section
        include help.pug

      div.about-section#about-section
        include about.pug

      div.tutorials-section#tutorials-section
        include tutorials.pug

      div.usersettings-section#usersettings-section
        include user.pug

      div.projects-section#projects-section

        div.myprojects#myprojects
          div.title
            div#projects-search
              input#projects-search-input(name="search")
              i.fa.fa-search
            h1 #{translator.get("My Projects")}
              div.create-project-button#create-project-button <i class="fa fa-plus-square"></i> #{translator.get("Create New Project")}
              div.import-project-button#import-project-button <i class="fa fa-upload"></i> #{translator.get("Import Project")}
          div.project-list#project-list

        div.projectview#projectview
          div.projectheader
            div.backtoprojects#backtoprojects <i class="fa fa-arrow-left"></i> #{translator.get("Back to Projects")}
            img.pixelated#project-icon
            i#project-fullscreen.fas.fa-expand(title=translator.get("Toggle Full Screen"))
            span#project-name Project name
            i#save-status(class="fa fa-ellipsis-h")
            div#active-project-users
              div.active-user
                i(class="fa fa-user")
                span username

          div.sidemenu#sidemenu
            ul
              li(id="menuitem-code") <i class="fa fa-code"></i><br /> #{translator.get("Code")}
              li(id="menuitem-sprites") <i class="fa fa-image"></i><br /> #{translator.get("Sprites")}
              li(id="menuitem-maps") <i class="fa fa-map"></i><br /> #{translator.get("Maps")}
              li(id="menuitem-assets") <i class="fa fa-cube"></i><br /> #{translator.get("Assets")}
              li(id="menuitem-sounds") <i class="fa fa-volume-up"></i><br /> #{translator.get("Sounds")}
              li(id="menuitem-music") <i class="fa fa-music"></i><br /> #{translator.get("Music")}
              li(id="menuitem-doc") <i class="fas fa-book"></i><br /> #{translator.get("Doc")}
              li(id="menuitem-sync") <i class="fas fa-sync"></i><br /> #{translator.get("Sync")}
              li(id="menuitem-options") <i class="fa fa-cogs"></i><br /> #{translator.get("Settings")}
              li(id="menuitem-publish") <i class="fa fa-upload"></i><br /> #{translator.get("Publish")}
              li(id="menuitem-tabs" title=translator.get("Manage tabs and plugins"))
                i.fas.fa-plus-circle

          div.section-container#section-container
            div.section#code-section
              include code.pug

            div.section#explore-section

            div.section#projects-section

            div.section#sprites-section
              include sprites.pug

            div.section#maps-section
              include maps.pug

            div.section#assets-section
              include assets.pug

            div.section#sounds-section
              include sounds.pug

            div.section#music-section
              include music.pug

            div.section#doc-section
              include doc.pug

            div.section.top-section-border.padding80#sync-section
              include sync.pug

            div.section#settings-section.
              Settings section here

            div.section#options-section
              include projectoptions.pug

            div.section#publish-section
              include publish.pug

            div.section#tabs-section
              include projecttabs.pug


    div.overlay#login-overlay
      div#login-window
        form#guest-panel
          h2 #{translator.get("Start creating")}
          div.button#guest-action-guest
            i.fas.fa-user-clock
            br
            h3 #{translator.get("Create as a guest")}
            p #{translator.get("Start using microStudio without creating an account.")}

          div.button#guest-action-create
            i.fa.fa-user-plus
            br
            h3 #{translator.get("Create my account")}
            p #{translator.get("Save your projects, work in teams, publish, vote, comment...")}

          div.button#guest-action-login
            i.fa.fa-sign-in-alt
            br
            h3 #{translator.get("Login")}
            p #{translator.get("Log in to your existing account.")}

        form#login-panel
          h2 #{translator.get("Registered User")}
          label #{translator.get("Nickname or e-mail")}
          br
          input(type="text" id="login_nick" required)
          br
          label #{translator.get("Password")}
          br
          input(type="password" id="login_password" required)
          br
          a#forgot-password-link(href="#") #{translator.get("Forgot password?")}
          br
          br
          button#login-submit #{translator.get("Log in")}
          br
          br
          p #{translator.get("Don't have an account yet?")}
          a(href="#" id="switch_to_create_account") #{translator.get("Create my account")}
        form#forgot-password-panel
          h2 #{translator.get("Password Recovery")}
          label #{translator.get("E-mail")}
          br
          input(type="text" id="forgot_email" required)
          br
          br
          button#forgot-submit #{translator.get("Send password recovery e-mail")}
          br
          br
          a(href="#" id="switch_from_forgot_to_login") #{translator.get("Back to login")}
        form#create-account-panel
          h2 #{translator.get("New User")}
          label #{translator.get("Nickname")}
          br
          input(type="text" id="create_nick" required)
          br
          label #{translator.get("E-mail address")}
          br
          input(type="email" id="create_email" required placeholder="E-mail address")
          br
          label #{translator.get("Password")}
          br
          input(type="password" id="create_password" required)
          br
          div#create-account-terms
          div(style="text-align:left")
            input(type="checkbox" id="create-account-tos" style="margin-bottom:4px")
            label(for="create-account-tos") #{translator.get("Accept the")}&nbsp;
            a#create-account-toggle-terms(href="#") #{translator.get("Terms of Use")}
            br
            input(type="checkbox" id="create-account-newsletter")
            label(for="create-account-newsletter") #{translator.get("Receive news (maximum once per month)")}
          button#create-account-submit #{translator.get("Create Account")}
          br
          br
          p #{translator.get("Already registered?")}
          a(href="#" id="switch_to_log_in") #{translator.get("Log in to existing account")}

    div.overlay#create-project-overlay
      div#create-project-window
        form#create-project-form
          h2 #{translator.get("Create New Project")}
          label #{translator.get("Title")}
          br
          input#create-project-title(type="text" required)
          br
          br
          button#create-project-submit #{translator.get("Create Project")}

          div#advanced-create-project-options-button
            i.fa
            span #{translator.get("Advanced")}

          div#advanced-create-project-options
            div.createprojectoption#create-project-option-type
              h3 #{translator.get("Project Type")}
              select#createprojectoption-type
                option(value="app") #{translator.get("App (game, demo...)")}
                option(value="library") #{translator.get("Library")}
                option(value="plugin") #{translator.get("Plug-in")}
                option(value="tutorial") #{translator.get("Tutorial")}
                option(value="example") #{translator.get("Example")}
                option(value="template") #{translator.get("Template")}

            div.createprojectoption#create-project-option-language
              h3 #{translator.get("Language support")}
              select#createprojectoption-language
                each val,key in language_engines
                  option(value=key) #{translator.get(val.title)}

            div.createprojectoption#create-project-option-graphics
              h3 #{translator.get("Graphics library")}
              select#createprojectoption-graphics
                option(value="M1") #{translator.get("basic graphics API")}
                option(value="M2D") #{translator.get("micro 2D - Experimental - Built on Pixi.js")}
                option(value="M3D") #{translator.get("micro 3D - Experimental - Built on Babylon.js")}
                option(value="PIXI") #{translator.get("Pixi.js - Experimental")}
                option(value="BABYLON") #{translator.get("Babylon.js - Experimental")}

            div.createprojectoption#create-project-option-networking
              h3 #{translator.get("Networking")} <span class="beta-pill">beta</span>
              input(type="checkbox" id="createprojectoption-networking")
              label(for="createprojectoption-networking") #{translator.get("Enable networking features")}
              div.tip #{translator.get("Create online multiplayer games using a client/server networking model")}

            div.createprojectoption#create-project-option-libs
              h3 #{translator.get("Additional tools and libraries")}
              each val,key in optional_libs
                input(type="checkbox" id="create-project-option-lib-"+key)
                label(for="create-project-option-lib-"+key) #{translator.get(val.title)}
                div.tip #{translator.get("Note: this integration is experimental")}
                br

    div.overlay#confirm-message-overlay
      div.confirm-message-box
        div#confirm-message-text Some text
        div.confirm-message-buttons
          div#confirm-message-cancel Cancel
          div#confirm-message-ok OK

    div#notification-container
      div#notification-bubble
        i(class="fa fa-comment")
        span Example Bubble Text

    div#tutorial-overlay

    div.floating-window#tutorial-window
      div.titlebar
        i.icon.fa.fa-lightbulb
        div.title #{translator.get("Tutorial")}
        i.minify.fa.fa-compress
      div.content.md
      div.navigation
        i.previous.fa.fa-arrow-left
        span.step 1/15
        i.next.fa.fa-arrow-right
        i.resize.fa.fa-grip-horizontal

    div.floating-window#run-window
      div.titlebar.runbar
        div.title #{translator.get("Run")}
        div.buttons
          div#run-button-win(title="Run project")
            i.fas.fa-play
          div#pause-button-win.selected(title="Pause execution")
            i.fas.fa-pause
          div#step-forward-button-win(title="Run project" style="display: none")
            i.fas.fa-step-forward
          div#reload-button-win.selected(title="Restart project")
            i.fa.fa-redo

        i.minify.fas.fa-minus-square(style="background:none;")
      div.content
      div.navigation
        i.resize.fa.fa-grip-horizontal

    canvas#highlighter

    i.fa.fa-arrow-right#highlighter-arrow

    div#user-progress-notifications
